<template>
  <div class="add-startup-dialog">
    <el-dialog title="新增启动页" :visible.sync="visible" width="300px">
      <app-single-image-upload v-model="dialogImageUrl"></app-single-image-upload>
      <ul class="tips-list">
        <li>图片格式要求：</li>
        <li>1、长*高 9：16</li>
        <li>2、格式jpg、png</li>
        <li>3、图片大小，不超过1M</li>
      </ul>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button type="primary" @click="addStartup" size="mini">确定上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ApiClient from '@/utils/ApiClient';
  import AppSingleImageUpload from '@/components/AppSingleImageUpload';

  export default {
    name: "AddStartUpDialog",
    components: {
      'app-single-image-upload': AppSingleImageUpload,
    },
    props: {
      dialogFormVisible: { type: Boolean, default: false },
      addUrl: String
    },
    data() {
      return {
        tmpUrl: `${process.env.API_URL_BASE}/commons/attachments/uploadTmp.do`,
        dialogImageUrl: "",
      }
    },
    computed: {
      visible: {
        get: function(){ return this.dialogFormVisible },
        set: function(val){ this.$emit("update:dialogFormVisible",val) }
      },
    },
    methods: {
      close(){
        this.visible = false;
      },
      addStartup() {
        let url = this.addUrl,
            data = { img: this.dialogImageUrl };
        ApiClient.post(url,data).then( (data) => {
            this.close();
            this.$emit("upload"); // 上传更新
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .app-single-image-upload{
    height: auto !important;
  }
  .tips-list{
    margin-bottom: 0;
    padding: 0;
    list-style-type: none;
  }
</style>
